// out: ../css/

@import url(./base.less);

@vw: 3.75vw;

.flex-align-center {
    display: flex;
    align-items: center;
}

body {
    background-color: #f9fafb;
}

/* 头部 */
header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    .flex-align-center();
    justify-content: space-between;
    padding: 0 (15 / @vw);
    height: (50 / @vw);
    background-color: #fff;

    .left {
        width: (235 / @vw);
        height: (50 / @vw);
        background-image: url(../assets/head.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    a {
        width: (80 / @vw);
        height: (30 / @vw);
        text-align: center;
        line-height: (30 / @vw);
        background-color: #ffe31b;
        border-radius: 4vw;
        font-size: (14 / @vw);
    }
}

/* 搜索 */
.search {
    height: (52 / @vw);
    padding: (10 / @vw) (15 / @vw);
    margin-top: (50 / @vw);

    .txt {
        width: (345 / @vw);
        height: (32 / @vw);
        background-color: #f2f4f5;
        text-align: center;
        line-height: (32 / @vw);
        color: #a1a4b3;
        font-size: (14 / @vw);
        border-radius: (16 / @vw);
    }
}

/* banner */
.banner {
    height: (108 / @vw);
    padding: 0 (15 / @vw);

    li {
        img {
            width: (345 / @vw);
            height: (108 / @vw);
            border-radius: (5 / @vw);
        }
    }
}

/* 排行榜 */
.rank {
    margin: (20 / @vw) 0 0;
    padding: 0 (15 / @vw);

    .title {
        margin: 0 0 (16 / @vw);
        .flex-align-center();
        justify-content: space-between;

        h4 {
            font-size: (20 / @vw);
        }

        a {
            font-size: (12 / @vw);
        }
    }

    .content {
        li {
            display: flex;
            margin: 0 0 (16 / @vw);
            background-color: #fff;
            border-radius: (10 / @vw);

            .pic {
                margin-right: (20 / @vw);

                img {
                    width: (105 / @vw);
                    height: (105 / @vw);
                    border-radius: (10 / @vw);
                }
            }

            .txt {
                .more {
                    font-size: (14 / @vw);
                    color: #333;
                }

                a {
                    display: block;
                    font-size: (12 / @vw);
                    color: #a1a4b3;
                    line-height: 1.8;
                }
            }

            &:last-child {
                margin: 0 0 (16 / @vw);
            }
        }


    }

}

/* 歌单 */
.son {
    padding: 0 (15 / @vw);

    .title {
        margin: 0 0 (16 / @vw);
        .flex-align-center();
        justify-content: space-between;

        h4 {
            font-size: (20 / @vw);
        }

        a {
            font-size: (12 / @vw);
        }
    }

    ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        li {
            display: flex;
            flex-wrap: wrap;
            width: (105 / @vw);
            height: (143 / @vw);

            .pic {
                position: relative;

                img {
                    width: (105 / @vw);
                    height: (105 / @vw);
                    border-radius: (10 / @vw);
                }

                .cover {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: (70 / @vw);
                    height: (28 / @vw);
                    background-color: rgba(0, 0, 0, 0.8);
                    border-radius: 0 (10 / @vw) 0 (10 / @vw);
                    text-align: center;
                    line-height: (28 / @vw);
                    color: #fff;
                    font-size: (14 / @vw);
                }
            }
        }
    }

}

/* 下载 */
.download {
    position: fixed;
    left: (15 / @vw);
    bottom: (30 / @vw);
    display: flex;
    align-items: center;
    padding: 0 (10 / @vw) 0 (15 / @vw);
    width: (345 / @vw);
    height: (45 / @vw);
    background-color: #fff;
    border-radius: (22 / @vw);

    img {
        margin-right: (10 / @vw);
        width: (36 / @vw);
        height: (36 / @vw);
    }

    p {
        flex: 1;
        font-size: (14 / @vw);
    }

    span {
        width: (32 / @vw);
        height: (32 / @vw);
        background-color: #f2f3f5;
        border-radius: 50%;
        text-align: center;
        line-height: (32 / @vw);
        font-size: (16 / @vw);
    }
}